<template>
  <div>
    <p class="title">标签分类设置</p>
    <div class="search-box">
      <div>
        <label>状态：</label>
        <el-select v-model="state" size="small" placeholder="请选择" @change="query">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </div>
      <el-button type="primary" size="small" @click="dialogFormVisible=true">新建</el-button>
    </div>
    <!-- 表格 -->
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" border>

      <el-table-column label="序号" width="80" type="index"></el-table-column>
      <el-table-column prop="stName" label="标签名称">
      </el-table-column>
      <el-table-column prop="orders" label="排序">
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.state=='1'">上架</span>
          <span v-else>下架</span>
        </template>
      </el-table-column>
      <el-table-column prop="activeTime" label="操作">
        <template slot-scope="scope">
          <el-button @click="dialogFormVisible=true" type="text" size="small">编辑</el-button>
          <el-button type="text" size="small">{{scope.row.state=='1'? '下架':'上架'}}</el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页 -->
    <page :total="total" :PageNumber.sync="pageNum" :PageSize.sync="pageSize" @current-change="changeCurrentPage"
        @size-change="handleSizeChange">
    </page>
    <!-- 新建/编辑 -->
    <el-dialog title="新建" center :visible.sync="dialogFormVisible" width="600px">
      <el-form :model="form" label-width="120px">

        <el-form-item label="标签名称：">
          <el-input></el-input>
        </el-form-item>


        <el-form-item label="状态：">
          <el-radio-group v-model="radio">
            <el-radio :label="3">启用</el-radio>
            <el-radio :label="6">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false" size="small">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import page from "@/components/page"
  import apis from "../../../apis/modules/mallLabelSetting"
  export default {
    components: {
      page
    },
    data() {
      return {
        dialogFormVisible: false,
        form: {},
        state: 'all',
        options: [{ value: 'all', label: "全部" }, { value: '1', label: "已上架" }, { value: '2', label: "已下架" }],
        tableData: [],
        pageNum: 1,
        pageSize: 10,
        total: 0,
      };
    },
    methods: {
      //获取门店类型
      getStoreType(){
        apis.getStoreType(this.state, this.pageNum, this.pageSize).then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.list;
            this.total = res.data.count;
          }
        });
      },
      query(){
        this.pageNum = 1;
        this.getStoreType();
      },
      changeCurrentPage(){
        this.getStoreType();
      },
      handleSizeChange(){
        this.getStoreType();
      }
    },

    mounted(){
      this.getStoreType();
    }
  };
</script>

<style lang="scss" scoped>
  .search-box {
    margin: 32px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>